import React, { useState, useEffect, useImperativeHandle } from 'react';
import {
  List,
  InputItem,
  DatePicker,
  TextareaItem,
  Checkbox,
  Button,
  Icon,
} from 'antd-mobile';
import SelfInput from 'components/common/selfInput';
import Cascade from 'components/common/cascade';
import Star from 'components/common/star';
import SelfCheckBox from 'components/common/selfCheckBox';
import ModalCheck from 'components/common/modalCheck';
import companyType from 'dic/companyType';
import { getDicType } from 'ser/actions';

import './index.less';

// 企业运输能力
export default function CompStorageCa({ item, cRef }) {
  const [tranCa, setTranCa] = useState([]);
  const [cwysVisible, setCwyspVisible] = useState(false);
  const [llysVisible, setLlysVisible] = useState(false);
  const [cwysTypeList, setCwysTypeList] = useState([]);
  const [llysTypeList, setLlysTypeList] = useState([]);
  const [cwysStr, setCwysStr] = useState('');
  const [cwysValueStr, setCwysValueStr] = useState('');
  const [llysStr, setLlysStr] = useState('');
  const [llysValueStr, setLlysValueStr] = useState('');
  // 字段
  const [transportCategory, setTransportCategory] = useState('');
  const [transportCategoryCN, setTransportCategoryCN] = useState('');
  const [cooperativeVehicle, setcooperativeVehicle] = useState('');
  const [ownVehicle, setownVehicle] = useState('');
  const [natVehicle, setnatVehicle] = useState('');
  const [coldVehicle, setcoldVehicle] = useState('');

  useEffect(() => {
    async function fetchData() {
      const dic1 = await getDicType({ value: 'transportCategory' }); // 仓储类别
      const dic2 = await getDicType({ value: 'natTransportType' }); // 常温运输类型
      const dic3 = await getDicType({ value: 'coldTransportType' }); // 冷链运输类型
      if (dic1.code === 0) {
        dic1.rows.length && setTranCa(dic1.rows);
      }
      if (dic2.code === 0) {
        dic2.rows.length && setCwysTypeList(dic2.rows);
      }
      if (dic3.code === 0) {
        dic3.rows.length && setLlysTypeList(dic3.rows);
      }
    }
    fetchData();
  }, []);
  useImperativeHandle(cRef, () => ({
    transportCategory,
    transportCategoryCN,
    natTransportType: cwysValueStr,
    natTransportTypeCN: cwysStr,
    coldTransportType: llysValueStr,
    coldTransportTypeCN: llysStr,
    cooperativeVehicle,
    ownVehicle,
    natVehicle,
    coldVehicle,
  }));
  function handleChange() {}

  // 运输方式的单选按钮
  function handleTransportRadio(val) {
    console.log(val);
  }

  return (
    <>
      <div className="compStyle">
        <div className="title">
          <span>运输类别（多选）</span>
        </div>
        <div className="radio">
          <SelfCheckBox
            data={tranCa}
            handleChange={(i, v) => {
              setTransportCategory(v + '');
              setTransportCategoryCN(i + '');
            }}
          />
        </div>
      </div>
      <div className="modalCheck" onClick={() => setCwyspVisible(true)}>
        <div>常温运输类型（多选）</div>
        {cwysStr ? (
          <div>{cwysStr}</div>
        ) : (
          <div>
            <span>请选择</span>
            <Icon type="right" />
          </div>
        )}
      </div>
      <div className="modalCheck" onClick={() => setLlysVisible(true)}>
        <div>冷链运输类型（多选）</div>
        {llysStr ? (
          <div>{llysStr}</div>
        ) : (
          <div>
            <span>请选择</span>
            <Icon type="right" />
          </div>
        )}
      </div>
      <ModalCheck
        visible={cwysVisible}
        data={cwysTypeList}
        handleModal={(i, v) => {
          setCwyspVisible(false);
          setCwysStr(i);
          setCwysValueStr(v);
        }}
      />
      <ModalCheck
        visible={llysVisible}
        data={llysTypeList}
        handleModal={(i, v) => {
          setLlysVisible(false);
          setLlysStr(i);
          setLlysValueStr(v);
        }}
      />
      <SelfInput
        label="合作车"
        isRequired={true}
        rule={{
          len: 1,
          empty: '请输入合作车',
          error: '请正确输入合作车',
        }}
        type='number'
        unit="辆"
        handleInputChange={v => setcooperativeVehicle(v)}
      />
      <SelfInput
        label="自有车"
        isRequired={true}
        rule={{
          len: 1,
          empty: '请输入自由车',
          error: '请正确输入自由车',
        }}
        type='number'
        unit="辆"
        handleInputChange={v => setownVehicle(v)}
      />
      <SelfInput
        label="常温车"
        isRequired={false}
        rule={{
          len: 1,
          empty: '请输入常温车',
          error: '请正确输入常温车',
        }}
        type='number'
        unit="辆"
        handleInputChange={v => setnatVehicle(v)}
      />
      <SelfInput
        label="冷藏车"
        isRequired={false}
        rule={{
          len: 1,
          empty: '请输入冷藏车',
          error: '请正确输入冷藏车',
        }}
        type='number'
        unit="辆"
        handleInputChange={v => setcoldVehicle(v)}
      />
    </>
  );
}
